<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>互联网金融贷款平台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link href="../css/register.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script src="../script/login.js" type="text/javascript"></script>
    <script src="../angularjs/vue.js"></script>
    <script src="../angularjs/axios.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- 引入样式eleme -->
    <link rel="stylesheet" href="../angularjs/index.css">
    <!-- 引入组件库 -->
    <script src="../angularjs/index.js"></script>
</head>
<body>
<div id="app">

    <!--注册-->
    <div class="wrap">
        <div class="tdbModule register">
            <div class="registerTitle">注册账户</div>
            <div class="registerLc1">
                <p class="p1">填写账户信息</p>
                <p class="p2">验证手机信息</p>
                <p class="p3">注册成功</p>
            </div>
            <div class="registerCont">
                <el-form :model="user" ref="user" label-width="100px" class="demo-ruleForm">
                    <!--用户名-->
                    <el-form-item
                            label="昵称"
                            prop="nickname"
                            :rules="[
                              { required: true, message: '昵称不能为空'}
                                 ]"
                    >

                        <el-input type="nickname" v-model="user.nickname" autocomplete="off"
                                  style="width: 30%"></el-input>
                    </el-form-item>

                    <el-form-item
                            label="密码"
                            prop="password"
                            :rules="[
                          { required: true, message: '密码不能为空'}
                          ]"
                    >
                        <el-input type="password" v-model="user.password" autocomplete="off"
                                  style="width: 30%"></el-input>
                    </el-form-item>


                    <el-form-item
                            prop="email"
                            label="邮箱"
                            :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                    >
                        <el-input v-model="user.email" style="width: 30%"></el-input>
                    </el-form-item>


                    <el-form-item
                            label="手机号"
                            prop="phone"
                            :rules="[
                          { required: true, message: '手机号不能为空'}
                          ]"
                    >
                        <el-input v-model="user.phone" autocomplete="off"
                                  style="width: 30%"></el-input>
                        <a class="btn btn-primary" @click="gain()">获取短信验证码</a>
                    </el-form-item>

                    <el-form-item
                            label="短信验证码"
                            prop="message"
                            :rules="[
                          { required: true, message: '短信验证码不能为空'}
                          ]"
                    >
                        <el-input type="message" v-model="user.message" autocomplete="off"
                                  style="width: 30%"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="submitForm('user')">提交</el-button>
                        <el-button @click="resetForm('user')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>


    <!--网站底部-->

</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            user: {},
            Result: {},
            yzm: null,
            uyzm: null,
            split: [],
        },
        methods: {
            gain: function () {
                if (vue.user.phone == null) {
                    vue.Result.data = "请输入正确的手机号码";
                    vue.Result.msg = "获取失败";
                    vue.open();
                } else {
                    vue.split = vue.user.phone.split('');
                    if (vue.split.length == 11) {
                        //获取短信验证码
                       // axios.post("http://127.0.0.1:9099/user/message?phone=" + vue.user.phone).then(function (response) {
                        axios.post(" http://localhost:10088/user/message?phone=" + vue.user.phone).then(function (response) {
                            let data1 = response.data;
                            vue.Result.data = data1.data;
                            vue.Result.msg = data1.msg;
                            if (data1.code == 200) {
                                //手机号码没有被注册
                                vue.open2();
                            } else {
                                vue.open();
                            }

                        })
                    }
                    else {
                        vue.Result.data = "请输入正确的手机号码";
                        vue.Result.msg = "获取失败";
                        vue.open();
                    }
                }

            },
            open() {
                //提示操作失败信息
                this.$message.error(vue.Result.msg + ":" + vue.Result.data);
            },
            open2() {
                this.$message({
                    message: vue.Result.data,
                    type: 'success'
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //当用户输入了所有的信息就会走这里
                        //axios.post("http://127.0.0.1:9099/user/register", vue.user).then(function (response) {
                        axios.post(" http://localhost:10088/user/register", vue.user).then(function (response) {
                            let data1 = response.data;
                            vue.Result.msg = data1.msg;
                            vue.Result.data = data1.data;
                            if (data1.code == 200) {
                                //注册成功
                                vue.open2();
                                localStorage.setItem("nickname", vue.user.nickname);
                                location.href = "register1.html"
                            } else {
                                //注册失败
                                vue.open();
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    })
</script>
</body>

</html>
